<template>
  <el-dialog title="图设计器" draggable :show-close="false" v-model="winState.open" :before-close="() => { }"
    :close-on-click-modal="false" style="background-color:var(--el-farms-win-bg-color); padding: 8px;" width="850">
    <div style="height:400px;border-radius: 10px;overflow: hidden;" v-loading="loadingFlag">
      <Flow_edit v-if="domLoadedRef" ref="flowEditRef"></flow_edit>
    </div>
    <div style="padding: 20px;padding-bottom: 10px;display: flex;" v-loading="loadingFlag">
      <el-button round type="primary" style="padding: 10px 40px;" @click="saveGraph" plain size="large">提交</el-button>
      <el-button round plain style="margin-left: auto;" @click="openWin(false)">关闭</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import Flow_edit from './commons/flow_edit.vue';
import { ElMessageBox } from 'element-plus';
import FarmNotice from '@/components/msg/FarmNotice';
import Farm2Request from '@/service/remoteRequests/Farm2Request';
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import type { DataResponse } from '@/types/commons/DataResponse';
const domLoadedRef = ref(false);
const winState = reactive({
  open: false,
  id: '',
});
const loadingFlag = ref(false);//加载中遮罩
const flowEditRef = ref();
const props = defineProps({
  submitHandle: {//props.submitHandle(id：图id, name：图名称);
    type: Function,
    required: true,
  }
});
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
const saveGraph = () => {
  if (flowEditRef.value.getTextNote()) {
    ElMessageBox.confirm(
      '是否提交图?', { confirmButtonText: '提交', cancelButtonText: '取消', }
    ).then(() => {
      // //获得预览图
      flowEditRef.value.viewImgHandle((imgBase64: string) => {
        //获得数据
        Farm2Request.submit("api/wgraph/add", RequestTypeEnum.post, loadingFlag, {
          title: flowEditRef.value.getTextNote(),
          dataJson: flowEditRef.value.getDataJson(),
          imgBase64: imgBase64,
          id: winState.id,
          appid: "NONE",
          model: "NONE"
        })
          .then((response: DataResponse) => {
            const id = (response.data as { id: string, name: string }).id;
            const name = (response.data as { id: string, name: string }).name;
            //获得文字描述
            props.submitHandle(id, name);
          })
          .catch((msg: string) => {
            FarmNotice.byError(msg); // 报错
          });
      })
    }).catch(() => {

    })
  } else {
    FarmNotice.byInfo('请完成图');
  }
}

// 定义一个方法
const openWin = (isOpen: boolean, graphId?: string) => {
  winState.open = isOpen;
  setTimeout(() => {
    if (isOpen) {
      domLoadedRef.value = true;
    } else {
      domLoadedRef.value = false;
    }
    if (graphId) {
      winState.id = graphId;
      loadGraph();
    }
  }, 200);
};

const loadGraph = () => {
  domLoadedRef.value = true;
  //获得数据
  Farm2Request.submit("api/wgraph/load", RequestTypeEnum.post, loadingFlag, {
    id: winState.id,
  })
    .then((response: DataResponse) => {
      const data = (response.data as { id: string, dataJson: string });
      //获得文字描述
      winState.id = data.id;
      flowEditRef.value.setDataJson(data.dataJson);
    })
    .catch((msg: string) => {
      FarmNotice.byError(msg); // 报错
    });
}

//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 暴露方法给父组件
defineExpose({
  openWin,
});
onMounted(() => {

})
</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
